<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title>点击加载更多</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<style>
   body,html{ margin:0px; padding:0px; font-family:"微软雅黑"; font-size:16px;}
   ul,li{ list-style-type:none;}
  .more-div{ width:100%;}
  .more-div li{ width:100%; height:30px; line-height:30px; border:solid 1px #ebebeb;  }
  .more{ width:50%; margin:20px auto; height:35px; line-height:35px; border:solid 1px #F00; text-align:center;}
  .more:hover{ background:#F00; color:#FFF; }
</style>
</head>

<body>
    <div class="more-div" id="main">
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
      <li>5555</li>
    </div>   
<div  class="more">点击加载更多</div>
<script type="text/javascript">
var app="";
$(function(){
 //后台数据
 var main=["生成数据1","生成数据2","生成数据3","生成数据4","生成数据5"];
 $(".more").click(function(){
	 $.ajax({
            type:"POST",
            contentType:"application/json;charset=UTF-8",
			url:"./more.json",
            dataType:"json",
            success:function(result){
                    alert("所填微信不存在!");
            },
			error:function(){
               alert("请求数据失败");
               }
        });
	 for(var i=0;i<main.length;i++){
		 if(main.length<5){
			 $(".more").hide();
			 }
		 else{
			 $(".more").show();
			 }
			 
		 app+='<li>'+main[i]+'</li>'
		 }
		 $("#main").append(app);
	  var h = document.documentElement.scrollHeight || document.body.scrollHeight;
      window.scrollTo(h,h);
	 })	
	
	})

</script>
</body>
</html>
